<template>
  <div v-if="show" class="open-page" @click.stop>
    <div class="van-dialog">
      <div class="van-dialog__header">{{ title }}</div>
      <div class="van-dialog__content">
        <div class="van-dialog__message van-dialog__message--has-title">{{ message }}</div>
      </div>
      <div class="van-hairline--top van-dialog__footer">
        <van-button class="van-dialog__cancel" @click.stop.native="cancelHandle">取消</van-button>
        <van-button class="van-dialog__confirm van-hairline--left" @click="confirmHandle">确定</van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'OpenPage',
  data() {
    return {
      title: '',
      message: '',
      url: '',
      show: false
    }
  },
  watch: {
    show(v) {
      if (v) {
        document.body.style.overflow = 'hidden'
      } else {
        document.body.style.overflow = 'initial'
      }
    }
  },
  mounted() {
    document.body.style.overflow = 'hidden'
  },
  methods: {
    cancelHandle() {
      this.show = false
      document.body.style.overflow = 'initial'
    },
    confirmHandle() {
      if (this.url) {
        // window.open(!/^(https?:\/\/)+/.test(this.url) ? `https://${this.url}` : this.url, this.target || '_blank')
        window.location.href = !/^(https?:\/\/)+/.test(this.url) ? `https://${this.url}` : this.url
      }
      this.show = false
      document.body.style.overflow = 'initial'
    }
  }
}
</script>
<style lang="less" scoped>
.open-page{
  z-index: 99999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(51, 51, 51, 0.5);
}
</style>
